<template>
    <view>
        <!--开始录制-->
        <view class="button_box button_begin" style="display: none" @click="beginRecord">
            <view class="button_box_list">
                <view class="button button_b">
                    <text class="iconfont begin_r">&#xe61a;</text>
                </view>
                <text class="button_b_t" style="font-weight: 400">开始录制</text>
            </view>
        </view>


        <!--录制中-->
        <view class="button_box">

            <view class="button_box_list relative_t" style="display: none">
                <view class="button button_s">
                    <text class="iconfont begin_b" style="position: relative;right:-4upx">&#xe619;</text>
                </view>
                <text class="button_s_t">试听</text>
            </view>

            <view class="button_box_list relative_t" @click="returnRecord">
                <view class="button button_s">
                    <text class="iconfont begin_l">&#xe617;</text>
                </view>
                <text class="button_s_t">重新录制</text>
            </view>


            <view class="button_box_list relative_t" style="display: none">
                <view class="button button_s">
                    <text class="iconfont begin_b">&#xe620;</text>
                </view>
                <text class="button_s_t">00:00</text>
            </view>
            <view class="button_box_list" style="display: none">
                <view class="button button_b">
                    <text class="iconfont begin_s">&#xe61f;</text>
                </view>
                <text class="button_b_t">正在录制</text>
                <text class="button_s_t">00:13</text>
            </view>
            <view class="button_box_list">
                <view class="button button_b">
                    <text class="iconfont begin_s">&#xe620;</text>
                </view>
                <text class="button_b_t">录制已暂停</text>
                <text class="button_s_t">00:13</text>
            </view>


            <view class="button_box_list relative_t" @click="completeRecord">
                <view class="button button_s">
                    <text class="iconfont begin_w">&#xe61b;</text>
                </view>
                <text class="button_s_t">完成录制</text>
            </view>


        </view>


    </view>
</template>

<script>
  export default {
    name: "record"
  }
</script>

<style lang="scss" scoped>
    .button_box {
        box-sizing: border-box;
        position: fixed;
        bottom: 20upx;
        left: 0upx;
        width: 100%;
        padding: 0 113upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .relative_t {
            position: relative;
            top: -24upx;
        }
        .button_box_list {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #ffffff;
            .button {
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                font-size: 20upx;
                border-radius: 50%;
                background-color: $uni-color-fcb300;
                margin-bottom: 14upx;
                .begin_r {
                    font-size: 70upx;
                }
                .begin_l {
                    font-size: 34upx;
                }
                .begin_b {
                    font-size: 26upx;
                }
                .begin_s {
                    font-size: 45upx;
                }
                .begin_w {
                    font-size: 26upx;
                }
            }
            .button_b {
                width: 140upx;
                height: 140upx;
            }
            .button_s {
                width: 80upx;
                height: 80upx;
            }
            .button_s_t {
                font-size: $uni-font-size-13;
                line-height: 38upx;
            }
            .button_s_b {
                font-size: $uni-font-size-base;
                line-height: 48upx;
            }
        }

    }

    .button_begin {
        justify-content: center;
        bottom: 53upx;
    }
</style>
